<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>需求管理平台 - 首页</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4F46E5',
            secondary: '#FACC15'
          },
          borderRadius: {
            'none': '0px',
            'sm': '2px',
            'DEFAULT': '4px',
            'md': '8px',
            'lg': '12px',
            'xl': '16px',
            '2xl': '20px',
            '3xl': '24px',
            'full': '9999px',
            'button': '4px'
          }
        }
      }
    }
  </script>
  <style>
    body {
      min-height: 1024px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    .font-logo {
      font-family: 'Pacifico', serif;
    }
    .icon-style {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  </style>
</head>
<body class="bg-gray-50 text-gray-800">
  <div class="flex flex-col min-h-screen w-full max-w-[1440px] mx-auto">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between">
      <div class="flex items-center space-x-4">
        <div class="text-2xl font-logo text-primary">logo</div>
        <div class="text-xl font-semibold">需求管理平台</div>
      </div>
      <div class="flex-1 max-w-md mx-8">
        <div class="relative">
          <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm icon-style w-5 h-5"></i>
          <input type="text" placeholder="搜索需求、文档、数据源..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-sm">
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <button class="relative p-2 text-gray-600 hover:text-primary">
          <i class="fas fa-bell text-lg icon-style w-6 h-6"></i>
          <span class="absolute top-1 right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
        </button>
        <div class="flex items-center space-x-2 cursor-pointer">
          <img src="https://ai-public.mastergo.com/gen_page/avatar_placeholder_40x40.png" alt="用户头像" class="w-8 h-8 rounded-full">
          <span class="text-sm font-medium">张三</span>
        </div>
        <button class="p-2 bg-primary text-white rounded-button whitespace-nowrap text-sm">AI 助手</button>
      </div>
    </header>

    <div class="flex flex-1">
      <!-- 左侧菜单栏 -->
      <aside class="w-64 bg-white shadow-md py-6 flex flex-col">
        <nav class="flex-1 px-4">
          <ul class="space-y-2">
            <li><a href="#" class="block py-2 px-4 bg-primary text-white rounded-md text-sm">首页</a></li>
            <li><a href="#" class="block py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-md text-sm">我的需求</a></li>
            <li><a href="#" class="block py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-md text-sm">待办任务</a></li>
            <li><a href="#" class="block py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-md text-sm">文档库</a></li>
            <li><a href="#" class="block py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-md text-sm">知识库</a></li>
            <li><a href="#" class="block py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-md text-sm">数据源管理</a></li>
            <li><a href="#" class="block py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-md text-sm">协作空间</a></li>
            <li><a href="#" class="block py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-md text-sm">审计日志</a></li>
          </ul>
        </nav>
        <div class="px-4">
          <button class="w-full py-2 text-gray-600 hover:bg-gray-100 rounded-md text-sm flex items-center justify-center">
            <i class="fas fa-arrow-left mr-2 icon-style w-4 h-4"></i>
            收起菜单
          </button>
        </div>
      </aside>

      <!-- 中心内容区 -->
      <main class="flex-1 p-6 bg-gray-50">
        <!-- 欢迎语与今日概览卡片 -->
        <section class="mb-8">
          <h1 class="text-2xl font-bold mb-4">您好，张三！今天又是高效的一天~</h1>
          <div class="grid grid-cols-4 gap-4">
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-500 text-sm mb-1">待处理任务数</div>
              <div class="text-2xl font-bold">5</div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-500 text-sm mb-1">新增需求数</div>
              <div class="text-2xl font-bold">2</div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-500 text-sm mb-1">异常待办数</div>
              <div class="text-2xl font-bold">1</div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-500 text-sm mb-1">UAT 待确认问题数</div>
              <div class="text-2xl font-bold">3</div>
            </div>
          </div>
        </section>

        <!-- 快捷操作区 -->
        <section class="mb-8">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold">快捷操作</h2>
            <button class="bg-primary text-white px-4 py-2 rounded-button whitespace-nowrap text-sm">创建新需求</button>
          </div>
          <div class="grid grid-cols-5 gap-4">
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-700 font-medium mb-2">需求 A</div>
              <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
                <div class="bg-primary h-2 rounded-full" style="width: 60%"></div>
              </div>
              <div class="text-xs text-gray-500">负责人：李四</div>
              <div class="text-xs text-gray-500">截止：2023-10-15</div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-700 font-medium mb-2">需求 B</div>
              <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
                <div class="bg-primary h-2 rounded-full" style="width: 30%"></div>
              </div>
              <div class="text-xs text-gray-500">负责人：王五</div>
              <div class="text-xs text-gray-500">截止：2023-10-20</div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-700 font-medium mb-2">需求 C</div>
              <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
                <div class="bg-primary h-2 rounded-full" style="width: 90%"></div>
              </div>
              <div class="text-xs text-gray-500">负责人：赵六</div>
              <div class="text-xs text-gray-500">截止：2023-10-10</div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-700 font-medium mb-2">需求 D</div>
              <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
                <div class="bg-primary h-2 rounded-full" style="width: 10%"></div>
              </div>
              <div class="text-xs text-gray-500">负责人：孙七</div>
              <div class="text-xs text-gray-500">截止：2023-10-25</div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-700 font-medium mb-2">需求 E</div>
              <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
                <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
              </div>
              <div class="text-xs text-gray-500">负责人：周八</div>
              <div class="text-xs text-gray-500">截止：2023-10-12</div>
            </div>
          </div>
        </section>

        <!-- 流程可视化区域 -->
        <section class="mb-8">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold">流程可视化</h2>
            <button class="text-primary text-sm">展开流程图</button>
          </div>
          <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
            <div class="flex items-center justify-between mb-4">
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mx-auto mb-2">1</div>
                <div class="text-xs">需求沟通</div>
              </div>
              <div class="flex-1 h-1 bg-gray-200 mx-2"></div>
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mx-auto mb-2">2</div>
                <div class="text-xs">任务排期</div>
              </div>
              <div class="flex-1 h-1 bg-gray-200 mx-2"></div>
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mx-auto mb-2">3</div>
                <div class="text-xs">文档编写</div>
              </div>
              <div class="flex-1 h-1 bg-gray-200 mx-2"></div>
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mx-auto mb-2">4</div>
                <div class="text-xs">数据源核查</div>
              </div>
              <div class="flex-1 h-1 bg-gray-200 mx-2"></div>
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mx-auto mb-2">5</div>
                <div class="text-xs">模型设计</div>
              </div>
              <div class="flex-1 h-1 bg-gray-200 mx-2"></div>
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mx-auto mb-2">6</div>
                <div class="text-xs">开发</div>
              </div>
              <div class="flex-1 h-1 bg-gray-200 mx-2"></div>
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mx-auto mb-2">7</div>
                <div class="text-xs">测试</div>
              </div>
              <div class="flex-1 h-1 bg-gray-200 mx-2"></div>
              <div class="text-center">
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mx-auto mb-2">8</div>
                <div class="text-xs">UAT / 发布</div>
              </div>
            </div>
            <div class="text-center text-red-500 text-sm">当前卡点：文档编写</div>
          </div>
        </section>

        <!-- 团队协作动态 -->
        <section class="mb-8">
          <h2 class="text-xl font-semibold mb-4">团队协作动态</h2>
          <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
            <ul class="space-y-3">
              <li class="flex items-start">
                <img src="https://ai-public.mastergo.com/gen_page/avatar_placeholder_32x32.png" alt="用户头像" class="w-6 h-6 rounded-full mr-3">
                <div>
                  <div class="text-sm"><span class="font-medium">李四</span> 提交了《需求 A》的模型设计文档</div>
                  <div class="text-xs text-gray-500">2023-10-10 14:30</div>
                </div>
              </li>
              <li class="flex items-start">
                <img src="https://ai-public.mastergo.com/gen_page/avatar_placeholder_32x32.png" alt="用户头像" class="w-6 h-6 rounded-full mr-3">
                <div>
                  <div class="text-sm"><span class="font-medium">王五</span> 完成了‘数据源核查’任务</div>
                  <div class="text-xs text-gray-500">2023-10-10 13:45</div>
                </div>
              </li>
              <li class="flex items-start">
                <img src="https://ai-public.mastergo.com/gen_page/avatar_placeholder_32x32.png" alt="用户头像" class="w-6 h-6 rounded-full mr-3">
                <div>
                  <div class="text-sm"><span class="font-medium">赵六</span> 在《需求 B》中添加了备注</div>
                  <div class="text-xs text-gray-500">2023-10-10 12:15</div>
                </div>
              </li>
            </ul>
          </div>
        </section>

        <!-- AI 推荐优先级任务 -->
        <section>
          <h2 class="text-xl font-semibold mb-4">AI 推荐优先级任务</h2>
          <div class="grid grid-cols-3 gap-4">
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-700 font-medium mb-2">任务 1</div>
              <div class="text-sm text-gray-500 mb-1">所属需求：需求 A</div>
              <div class="flex items-center mb-2">
                <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded mr-2">紧急</span>
                <span class="text-xs text-gray-500">预计耗时：2 小时</span>
              </div>
              <button class="text-primary text-sm">查看详情</button>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-700 font-medium mb-2">任务 2</div>
              <div class="text-sm text-gray-500 mb-1">所属需求：需求 C</div>
              <div class="flex items-center mb-2">
                <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded mr-2">重要</span>
                <span class="text-xs text-gray-500">预计耗时：1.5 小时</span>
              </div>
              <button class="text-primary text-sm">查看详情</button>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
              <div class="text-gray-700 font-medium mb-2">任务 3</div>
              <div class="text-sm text-gray-500 mb-1">所属需求：需求 B</div>
              <div class="flex items-center mb-2">
                <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-2">一般</span>
                <span class="text-xs text-gray-500">预计耗时：3 小时</span>
              </div>
              <button class="text-primary text-sm">查看详情</button>
            </div>
          </div>
        </section>
      </main>
    </div>
  </div>
</body>
</html>
